<?php
header("content-type:text/html;charset=utf-8");
include "../../public/config/config.php";
$html_js="active";
?>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>JS特效 -- <?php echo $cfg_indexname;?></title>
	<meta name="description" content="汪观富的个人网站"/>
	<meta name="keywords" content="汪观富的个人网站,汪观富网,汪观富JS特效集"/>
	
	<!-- Bootstrap -->
	<link href="/public/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="/public/css/main.css"/>
	
	<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
	<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
	<!--[if lt IE 9]>
	<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
	<![endif]-->
</head>
<body>
<?php include "../../public/include/head.php";?>
<div class="container">
	<ol class="breadcrumb bg_eee">
		<li><a href="/index.php">首页</a></li>
		<li class="active">JS特效</li>
	</ol>
	<h3 class="text-center bg-primary">JS特效</h3>
	<ul class="nav nav-pills">
	    <li class="active"><a href="#banner" data-toggle="tab">焦点点灯</a></li>
	   	<li><a data-toggle="tab" href="#nav">菜单导航</a></li>
		<li><a data-toggle="tab" href="#TAB">选项卡TAB</a></li>
    	<li><a data-toggle="tab" href="#kefu">在线客服</a></li>
    	<li><a data-toggle="tab" href="#tupian">图片特效</a></li>
    	<li><a data-toggle="tab" href="#phpoto">相册特效</a></li>
    	<li><a data-toggle="tab" href="#form">表单按钮</a></li>
    	<li><a data-toggle="tab" href="#ads">广告代码</a></li>
    	<li><a data-toggle="tab" href="#date">时间日期</a></li>
    	<li><a data-toggle="tab" href="#bofangqi">播放器特效</a></li>
    	<li><a data-toggle="tab" href="#wenzi">文字特效</a></li>
    	<li><a data-toggle="tab" href="#pubuliu">瀑布流特效</a></li>
    	<li><a data-toggle="tab" href="#mouse">鼠标特效</a></li>
    	<li><a data-toggle="tab" href="#chuangkou">窗口特效</a></li>
    	<li><a data-toggle="tab" href="#shoufengqin">手风琴效果</a></li>
    	<li><a data-toggle="tab" href="#fenye">分页代码</a></li>
    	<li><a data-toggle="tab" href="#top">返回顶部</a></li>
    	<li><a data-toggle="tab" href="#time">时间轴特效</a></li>
    	<li><a data-toggle="tab" href="#fangdajing">放大镜效果</a></li>
    	<li><a data-toggle="tab" href="#zhuanpan">抽奖转盘</a></li>
    	<li><a data-toggle="tab" href="#jQuery">jQuery特效</a></li>
    	<li><a data-toggle="tab" href="#CSS3">CSS3特效</a></li>
    	<li><a data-toggle="tab" href="#html5">html5特效</a></li>
    	<li><a data-toggle="tab" href="#game">游戏</a></li>
    	<li><a data-toggle="tab" href="#other">其它特效</a></li>
	</ul>
	<hr />
	<div class="tab-content min_hei">
		<!--焦点点灯-->
	    <div class="tab-pane active" id="banner">
	    	<h3>JS特效&gt;&gt;焦点点灯</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<a href="data/banner/lbo/index.html" target="_blank">
		    			<h4 class="text-center">普通轮播图</h4>
		    			<div class="a_img"><img src="data/banner/lbo/1.png" width="100%" height="100%"/></div>
		    		</a>
	    		</div>
	    		<div class="col-md-3">
		    		<a href="data/banner/tab_lb/" target="_blank">
		    			<h4 class="text-center">支持电脑手机端的幻灯片轮播</h4>
		    			<div class="a_img"><img src="data/banner/tab_lb/1.png" width="100%" height="100%"/></div>
		    		</a>
	    		</div>
	    		<div class="col-md-3">
		    		<a href="data/banner/ed_lb/" target="_blank">
		    			<h4 class="text-center">比较智能的轮播图</h4>
		    			<div class="a_img"><img src="data/banner/ed_lb/1.png" width="100%" height="100%"/></div>
		    		</a>
	    		</div>
	    		<div class="col-md-3">
		    		<a href="data/banner/tab_lb/" target="_blank">
		    			<h4 class="text-center">支持电脑手机端的幻灯片轮播</h4>
		    			<div class="a_img"><img src="data/banner/tab_lb/1.png" width="100%" height="100%"/></div>
		    		</a>
	    		</div>
	    	</div>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<a href="data/banner/tab_lb/" target="_blank">
		    			<h4 class="text-center">支持电脑手机端的幻灯片轮播</h4>
		    			<div class="a_img"><img src="data/banner/tab_lb/1.png" width="100%" height="100%"/></div>
		    		</a>
	    		</div>
	    	</div>
	    </div>
	    <!--菜单导航-->
	    <div class="tab-pane" id="nav">
	    	<h3>JS特效&gt;&gt;菜单导航</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<a href="data/nav/nav_top_3j_9/index.html" target="_blank">
		    			<h4 class="text-center">顶部三级下拉导航</h4>
		    			<div class="a_img"><img src="data/nav/nav_top_3j_9/1.png" width="100%" height="100%"/></div>
		    		</a>
	    		</div>
	    	</div>
	    	<div class="row">
	    		
	    		
	    	</div>
	    </div>
	    <!--选项卡TAB-->
	    <div class="tab-pane" id="TAB">
	    	<h3>JS特效&gt;&gt;选项卡TAB</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<a href="data/tabs/jq_tabs/index.html" target="_blank">
		    			<h4 class="text-center">多个选项卡标签切换</h4>
		    			<div class="a_img"><img src="data/tabs/jq_tabs/1.png" width="100%" height="100%"/></div>
		    		</a>
	    		</div>
	    		<div class="col-md-3">
		    		<a href="data/tabs/jq_tabs_4/index.html" target="_blank">
		    			<h4 class="text-center">四种切换方式的标签切换</h4>
		    			<div class="a_img"><img src="data/tabs/jq_tabs_4/1.png" width="100%" height="100%"/></div>
		    		</a>
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--在线客服-->
	    <div class="tab-pane" id="kefu">
	    	<h3>JS特效&gt;&gt;在线客服</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<a href="data/kefu/jq_kefu/index.html" target="_blank">
		    			<h4 class="text-center">JQ实现的在线客服</h4>
		    			<div class="a_img"><img src="data/kefu/jq_kefu/1.png" width="100%" height="100%"/></div>
		    		</a>
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--图片特效-->
	    <div class="tab-pane" id="tupian">
	    	<h3>JS特效&gt;&gt;图片特效</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--相册特效-->
	    <div class="tab-pane" id="phpoto">
	    	<h3>JS特效&gt;&gt;相册特效</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--表单按钮-->
	    <div class="tab-pane" id="form">
	    	<h3>JS特效&gt;&gt;表单按钮</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--广告代码-->
	    <div class="tab-pane" id="ads">
	    	<h3>JS特效&gt;&gt;广告代码</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--时间日期-->
	    <div class="tab-pane" id="date">
	    	<h3>JS特效&gt;&gt;时间日期</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--播放器特效-->
	    <div class="tab-pane" id="bofangqi">
	    	<h3>JS特效&gt;&gt;播放器特效</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--文字特效-->
	    <div class="tab-pane" id="wenzi">
	    	<h3>JS特效&gt;&gt;文字特效</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--瀑布流特效-->
	    <div class="tab-pane" id="pubuliu">
	    	<h3>JS特效&gt;&gt;瀑布流特效</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--鼠标特效-->
	    <div class="tab-pane" id="mouse">
	    	<h3>JS特效&gt;&gt;鼠标特效</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--窗口特效-->
	    <div class="tab-pane" id="chuangkou">
	    	<h3>JS特效&gt;&gt;窗口特效</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--手风琴效果-->
	    <div class="tab-pane" id="shoufengqin">
	    	<h3>JS特效&gt;&gt;手风琴效果</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--分页代码-->
	    <div class="tab-pane" id="fenye">
	    	<h3>JS特效&gt;&gt;分页代码</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--返回顶部-->
	    <div class="tab-pane" id="top">
	    	<h3>JS特效&gt;&gt;返回顶部</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--时间轴特效-->
	    <div class="tab-pane" id="time">
	    	<h3>JS特效&gt;&gt;时间轴特效</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--放大镜效果-->
	    <div class="tab-pane" id="fangdajing">
	    	<h3>JS特效&gt;&gt;放大镜效果</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--抽奖转盘-->
	    <div class="tab-pane" id="zhuanpan">
	    	<h3>JS特效&gt;&gt;抽奖转盘</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--jQuery特效-->
	    <div class="tab-pane" id="jQuery">
	    	<h3>JS特效&gt;&gt;jQuery特效</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--CSS3特效-->
	    <div class="tab-pane" id="CSS3">
	    	<h3>JS特效&gt;&gt;CSS3特效</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<a href="data/css3/3d_1-12/index.html" target="_blank">
		    			<h4 class="text-center">动画，转换和3D转换（1-12）</h4>
		    			<div class="a_img"><img src="data/css3/3d_1-12/1.png" width="100%" height="100%"/></div>
		    		</a>
	    		</div>
	    		<div class="col-md-3">
		    		<a href="data/css3/animate_demo/index.html" target="_blank">
		    			<h4 class="text-center">CSS3动画（Animate.css）</h4>
		    			<div class="a_img"><img src="data/css3/animate_demo/1.png" width="100%" height="100%"/></div>
		    		</a>
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--html5特效-->
	    <div class="tab-pane" id="html5">
	    	<h3>JS特效&gt;&gt;html5特效</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<!--<a href="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/index.html" target="_blank">
		    			<h4 class="text-center">jQuery缩略图预览焦点幻灯片</h4>
		    			<img src="data/JS特效/焦点点灯/jQuery缩略图预览焦点幻灯片/jquerycontentslide.jpg" width="100%" height="100%"/>
		    		</a>-->
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--游戏-->
	    <div class="tab-pane" id="game">
	    	<h3>JS特效&gt;&gt;游戏</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<a href="data/game/snake/index.html" target="_blank">
		    			<h4 class="text-center">贪吃蛇大作战</h4>
		    			<div class="a_img"><img src="data/game/snake/1.png" width="100%" height="100%"/></div>
		    		</a>
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    <!--其它特效-->
	    <div class="tab-pane" id="other">
	    	<h3>JS特效&gt;&gt;其它特效</h3>
	    	<div class="row">
	    		<div class="col-md-3">
		    		<a href="data/other/canvas/index1.html" target="_blank">
		    			<h4 class="text-center">在这个框框里点几下试试</h4>
		    			<div class="a_img"><img src="data/other/canvas/1.png" width="100%" height="100%"/></div>
		    		</a>
	    		</div>
	    		<div class="col-md-3">
		    		<a href="data/other/canvas/index2.html" target="_blank">
		    			<h4 class="text-center">在这个框框里划几下试试</h4>
		    			<div class="a_img"><img src="data/other/canvas/2.png" width="100%" height="100%"/></div>
		    		</a>
	    		</div>
	    		<div class="col-md-3">
		    		<a href="data/other/canvas/index_eye.html" target="_blank">
		    			<h4 class="text-center">眼睛跟随鼠标位置</h4>
		    			<div class="a_img"><img src="data/other/canvas/3.png" width="100%" height="100%"/></div>
		    		</a>
	    		</div>
	    		<div class="col-md-3">
		    		<a href="data/other/canvas/line-mouse.html" target="_blank">
		    			<h4 class="text-center">js实现线条跟着鼠标走</h4>
		    			<div class="a_img"><img src="data/other/canvas/4.png" width="100%" height="100%"/></div>
		    		</a>
	    		</div>
	    		
	    	</div>
	    	
	    </div>
	    
	</div>
</div>
<?php include "../../public/include/footer.php";?>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script type="text/javascript" src="/public/js/jquery-3.3.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script type="text/javascript" src="/public/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/public/js/footer.js"></script>
</body>
</html>